<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .form{
            position:absolute;
            top:20px;
            left:50%;
            transform:translate(-50%,0%);
            background-color: #909399;
            border-radius: 50px;
            border: lightskyblue solid 2px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-button type="primary" round @click="openAddForm">添加选课</el-button>
        <el-button type="primary" round @click="openBatchForm">批量操作选课</el-button>
        <template>
            <el-select v-model="checkedCourseIds" :multiple="courseIdEnableMultiple" placeholder="请选择课程" @change="checkChange">
                <el-option
                        v-for="course in courses"
                        :key="course.id"
                        :label="course.name"
                        :value="course.id">
                </el-option>
            </el-select>

            <el-select
                    v-model="checkedTerms"
                    :multiple="termEnableMultiple"
                    collapse-tags
                    style="margin-left: 20px;"
                    placeholder="请选择学期" @change="checkChange">
                <el-option
                        v-for="term in terms"
                        :key="term"
                        :label="term"
                        :value="term">
                </el-option>
            </el-select>
        </template>
        <template>
            <el-table
                    :data="filterCourseStudents"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="选课id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="term"
                        label="学期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="collegeName"
                        label="学院"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="courseCode"
                        label="课程编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="courseName"
                        label="课程名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="studentNo"
                        label="学号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="studentName"
                        label="姓名"
                        width="90">
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template #default="{row}">
                        <el-button @click="editCourseStudent(row)" type="primary" icon="el-icon-edit" circle></el-button>
                        <el-button @click="deleteCourseStudent(row)" type="danger" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-form class="form" ref="form" :model="courseStudentModel" label-width="80px" v-show="formShow">
            <el-form-item label="学期">
                <el-select placeholder="学期" v-model="courseStudentModel.term" :value="courseStudentModel.term">
                    <el-option v-for="term in terms" :value="term" :label="term"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课程">
                <el-select placeholder="课程" v-model="courseStudentModel.courseId" :value="courseStudentModel.courseId" @change="getOptionalStudent">
                    <el-option v-for="course in courses" :value="course.id" :label="course.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学生">
                <el-select placeholder="学生" v-model="courseStudentModel.studentId"  :value="courseStudentModel.studentId" :disabled="courseStudentModel.courseId==null">
                    <el-option v-for="student in optionalStudents" :value="student.id" :label="student.firstname+student.lastname"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateOrAddCourseStudent">完成</el-button>
                <el-button @click="closeForm">取消</el-button>
            </el-form-item>
        </el-form>
        <el-form class="form" ref="form" :model="courseStudentModel" label-width="80px" v-show="formTwoShow">
            <el-radio-group v-model="batchOption" @change="courseStudentModel={}">
                <el-radio-button  label="课程批量添加学生"></el-radio-button>
                <el-radio-button  label="课程批量删除学生"></el-radio-button>
            </el-radio-group>
            <el-form-item label="学期" v-show="batchOption=='课程批量添加学生'">
                <el-select placeholder="学期" v-model="courseStudentModel.term" :value="courseStudentModel.term">
                    <el-option v-for="term in terms" :value="term" :label="term"></el-option>
                </el-select>
            </el-form-item>
            <div>
                <el-form-item label="课程">
                    <el-select @change="getOptionalStudent" placeholder="课程" v-model="courseStudentModel.courseId" :value="courseStudentModel.courseId" >
                        <el-option v-for="course in courses" :value="course.id" :label="course.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学生">
                    <el-select v-model="courseStudentModel.studentIds" multiple placeholder="请选择学生" :disabled="courseStudentModel.courseId==null">
                        <el-option
                                v-for="student in optionalStudents"
                                :key="student.id"
                                :label="student.firstname+student.lastname"
                                :value="student.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button type="primary" @click="batchHandleCourseStudent">完成</el-button>
                <el-button @click="closeBatchForm">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>



<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                http_prefix:'http://localhost:8080/',
                config : {
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                },
                batchOption:'课程批量添加学生',
                formShow:false,
                formTwoShow:false,
                courseStudentModel:{},
                courseStudents:[],
                filterCourseStudents:[],
                students:[],
                courses:[],
                optionalCourses:[],
                optionalStudents:[],
                terms:[],
                checkedCourseIds:[],
                checkedTerms:[],
                courseIdEnableMultiple:true,
                termEnableMultiple:true
            }
        },
        methods: {
            closeForm(){
                this.formShow=false;
                this.courseStudentModel={};
            },
            hintMsg(msg) {
                this.$message(msg);
            },
            successMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },
            warnMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'warning'
                });
            },
            errorMsg(msg) {
                this.$message.error(msg);
            },
            async getCourseByTeacher(){
                await axios.get(this.http_prefix+"course/teacher").then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.courses=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            getCourseStudentByTeacher(){
              axios.get(this.http_prefix+"courseStudent/teacher").then(resp=>{
                  if(resp.data.code!=1)
                  {
                      this.errorMsg(resp.data.msg)
                      return;
                  }
                  this.courseStudents=resp.data.data
                  this.checkChange()
              }).catch(err=>{
                  this.errorMsg(err.message)
              })
            },
            addCourseStudent(courseStudent){
                axios.post(this.http_prefix+"courseStudent",JSON.stringify(courseStudent),this.config)
                    .then(resp=>{
                        if(resp.data.code!=1)
                        {
                            this.errorMsg(resp.data.msg)
                            return;
                        }
                        this.successMsg(resp.data.msg)
                        this.getCourseStudentByTeacher()
                    }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            updateCourseStudent(courseStudent){
              axios.put(this.http_prefix+"courseStudent",JSON.stringify(courseStudent),this.config).then(resp=>{
                      if(resp.data.code!=1)
                      {
                          this.errorMsg(resp.data.msg)
                          return;
                      }
                      this.successMsg(resp.data.msg)
                      this.getCourseStudentByTeacher()
                  }).catch(err=>{
                  this.errorMsg(err.message)
              })
            },
            deleteById(id)
            {
                axios.delete(this.http_prefix+"courseStudent/"+id)
                    .then(resp=>{
                        if(resp.data.code!=1)
                        {
                            this.errorMsg(resp.data.msg)
                            return;
                        }
                        this.successMsg(resp.data.msg)
                        this.getCourseStudentByTeacher()
                    }).catch(err=>{
                this.errorMsg(err.message)
            })
            },
            init(){
                this.getTerms().then(resp=>{
                    this.getCourseByTeacher().then(resp=>{
                        this.getCourseStudentByTeacher()
                    })
                })
            },
            async getAllStudent(){
                await axios.get(this.http_prefix+"student").then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg)
                        return;
                    }
                    this.optionalStudents=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            updateOrAddCourseStudent(){
                if(this.courseStudentModel.id!=null)
                {
                    this.updateCourseStudent(this.courseStudentModel)
                }else{
                    this.addCourseStudent(this.courseStudentModel)
                }
                this.closeForm()
            },
            editCourseStudent(row){
                this.getCourseByTeacher().then(res=>{
                    this.getAllStudent().then(res=>{
                        this.formShow=true
                        this.courseStudentModel={...row}
                    })
                })
            },
            deleteCourseStudent(row){
                this.deleteById(row.id)
            },
            openAddForm(){
                this.getCourseByTeacher().then(res=>{
                        this.getTerms().then(res=>{
                            this.formShow=true
                    })
                })
            },
            openBatchForm()
            {
                this.getCourseByTeacher().then(res=>{
                        this.getTerms().then(res=>{
                            this.formTwoShow=true
                        })
                })
            },
            closeBatchForm(){
                this.formTwoShow=false;
                this.courseStudentModel={};
            },
            batchHandleCourseStudent(){
                let axiosRef;
                if(this.batchOption=="课程批量添加学生")
                {
                        axiosRef=axios.post(this.http_prefix+"courseStudent/batch",JSON.stringify(this.courseStudentModel),this.config)
                }else{
                    let courseIds;
                    let studentIds;
                    studentIds=this.courseStudentModel.studentIds.join(",")
                    courseIds=this.courseStudentModel.courseId
                   axiosRef=axios.delete(this.http_prefix+"courseStudent/batch/"+courseIds+"/"+studentIds)
                }
                axiosRef.then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg)
                        return;
                    }
                    this.successMsg(resp.data.msg)
                    this.getCourseStudentByTeacher()
                    this.closeBatchForm()
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            getOptionalStudent(){
                let urlPath="getOptionalStudentsByCourseId";
                if(this.batchOption=='课程批量删除学生'){
                    urlPath="getDeletableStudentsByCourseId"
                }
                axios.get(this.http_prefix+"/courseStudent/"+urlPath+"/"+this.courseStudentModel.courseId).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg)
                        return;
                    }
                    this.optionalStudents=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            async getTerms(){
                await axios.get(this.http_prefix+"/courseStudent/terms").then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg)
                        return;
                    }
                    this.terms=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            checkChange(){
                let css=this.courseStudents

                if(this.checkedCourseIds.length>1)
                    this.termEnableMultiple=false
                else
                    this.termEnableMultiple=true
                if(this.checkedTerms.length>1)
                    this.courseIdEnableMultiple=false
                else
                    this.courseIdEnableMultiple=true

                if(this.checkedCourseIds.length>0)
                    css=css.filter(cs=>this.checkedCourseIds.indexOf(cs.courseId)!=-1)
                if(this.checkedTerms.length>0)
                    css=css.filter(cs=>this.checkedTerms.indexOf(cs.term)!=-1)


                this.filterCourseStudents=css
            }
        },
        mounted() {
            this.init()
        }

    })
</script>
</html>